const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './new-components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Josefin Sans"', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        theme: {
          primary: '#8665FF',
          light: '#f7f7f7',
          dark: '#151622',
          'dark-container': '#232734',
          success: '#52C41A',
          error: '#FF4D4F',
          warning: '#FAAD14',
        },
        gradientL: '#9C81F2',
        gradientR: '#747EFC',
        T1: 'rgb(249, 58, 74)',
        T2: 'rgb(255, 101, 101)',
        T3: 'rgb(255, 143, 31)',
        customPurple: 'rgba(207, 194, 254, .2)',
        customPurple2: 'rgba(207, 194, 254, .4)',
        borderColor: '#e9e2f4',
        darkBorderColor: '#1B1D20',
        btnDarkBorder:'#292C2F'
      },
      backgroundColor: {
        bar: '#EEF3FC',
        'welcome-t2': "rgba(239, 231, 255, 0.5)",
        bSet: 'rgb(249, 251, 255)',
        bSetDark: '#232734',
      },
      textColor: {
        default: '#8665FF',
      },
      backgroundImage: {
        // 'gradient-light': "url('/pictures/bg.png')",
        // 'gradient-dark': 'url("/pictures/bg_dark.png")',
        'button-gradient': 'linear-gradient(to right, theme("colors.gradientL"), theme("colors.gradientR"))',
        'welcome-bg': "url('/ai/welcome-bg.png')",
        'welcome-bg-dark': "url('/ai/welcome-bg-dark.png')",
        'welcome-t1': 'linear-gradient(to right, rgba(229, 244, 255, 0.75), rgba(239, 231, 255, 0.75))',
        'welcome-t3': "url('/ai/welcome-t3.png')",
        'welcome-t4': "url('/ai/welcome-t4.png')",
        'welcome-t1-dark': "url('/ai/welcome-t1-dark.png')",
        'welcome-t2-dark': "url('/ai/welcome-t2-dark.png')",
        'welcome-t3-dark': "url('/ai/welcome-t3-dark.png')",
        'welcome-t4-dark': "url('/ai/welcome-t4-dark.png')",
        'indexBg': "url('/ai/indexBg.png')",
        'carousel-bg': "url('/ai/carousel/carousel-bg.png')",
      },
      keyframes: {
        pulse1: {
          '0%, 100%': { transform: 'scale(1)', backgroundColor: '#bdc0c4' },
          '33.333%': { transform: 'scale(1.5)', backgroundColor: '#525964' },
        },
        pulse2: {
          '0%, 100%': { transform: 'scale(1)', backgroundColor: '#bdc0c4' },
          '33.333%': { transform: 'scale(1.0)', backgroundColor: '#bdc0c4' },
          '66.666%': { transform: 'scale(1.5)', backgroundColor: '#525964' },
        },
        pulse3: {
          '0%, 66.666%': { transform: 'scale(1)', backgroundColor: '##bdc0c4' },
          '100%': { transform: 'scale(1.5)', backgroundColor: '#525964' },
        },
      },
      animation: {
        pulse1: 'pulse1 1.2s infinite',
        pulse2: 'pulse2 1.2s infinite',
        pulse3: 'pulse3 1.2s infinite',
      },
    },
  },
  important: true,
  darkMode: 'class',
  /**
   * @see https://www.tailwindcss-animated.com/configurator.html
   */
  plugins: [
    require('tailwindcss/nesting'),
    require('tailwindcss-animated'),
  ],
};
